<template>
    <el-card class="box-card" shadow="hover" @click="goDetail">
        <div class="card-content">
            <div class="card-content-left">
                <div class="name">
                    {{hospitalInfo.hosname}}
                </div>
                <div class="tip">
                    <div class="level">
                        <svg t="1696057723233" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="7617" width="16" height="16">
                            <path
                                d="M259.60156269 433.88281277h-93.75000019a10.82812473 10.82812473 0 0 0-10.82812473 10.85156186v390.2812501c0 5.97656223 4.8515625 10.82812473 10.82812473 10.82812554h93.75000018V433.88281277z m64.9218749-3.3281249v415.2890624h447.09374982a10.82812473 10.82812473 0 0 0 10.80468759-10.82812554V830.74999963l86.484375-324.93749936a97.57031232 97.57031232 0 0 0-97.28906259-93.6093749h-181.12500028l7.54687574-38.71875064c5.15625018-26.62500009 11.32031277-45.28125027 11.32031195-81.56249946V247.53125009c0-53.7890625-43.6640625-71.78906223-97.35937482-71.78906222-53.67187518 0-97.35937481 17.99999973-97.35937481 71.78906222v44.43750028c0 50.85937463-28.42968741 82.03125037-84.49218732 133.42968732l-5.62500028 5.15625018z m447.09374982 480.32812463H165.82812537A75.89062491 75.89062491 0 0 1 90.125 835.01562473V444.73437463a75.89062491 75.89062491 0 0 1 75.70312537-75.8906249h129.515625c26.60156213-26.13281287 54.39843787-41.29687491 54.39843704-76.89843732V247.50781213C349.74218741 157.85937463 422.51562491 110.67968769 512 110.67968769s162.25781259 47.15624981 162.25781259 136.82812444v44.43750028c0 25.71093787-2.62500019 31.68750009-5.97656222 55.21874991h103.33593704c89.48437509 0 162.25781259 72.93749991 162.25781259 162.60937536v4.26562509l-86.6953125 325.78124936a75.91406287 75.91406287 0 0 1-75.56250009 71.06250037z"
                                fill="#515151" p-id="7618"></path>
                        </svg>
                        <span>{{ hospitalInfo.param.hostypeString }}</span>
                    </div>
                    <div class="time">
                        <svg t="1696057787613" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="15071" width="16" height="16">
                            <path
                                d="M163.2 1000.8c-4.8 0-9.6-1.6-14.4-5.6-8.8-7.2-9.6-21.6-2.4-32l83.2-97.6-4.8-4C120 777.6 60.8 652 60.8 518.4c0-51.2 8.8-102.4 25.6-150.4l1.6-4-3.2-2.4c-40-30.4-63.2-77.6-63.2-127.2 0-88 71.2-160 160-160 44 0 84.8 17.6 114.4 48l3.2 3.2 4-1.6c62.4-32.8 132-48.8 203.2-48.8 71.2 0 144 18.4 208.8 52l4 2.4 3.2-3.2c29.6-32.8 72-51.2 117.6-51.2 88 0 160 71.2 160 160 0 53.6-26.4 103.2-70.4 132.8l-4 2.4 1.6 4c16 46.4 24 95.2 24 145.6 0 134.4-60 260-164.8 344l-4.8 3.2 81.6 97.6c4 4 5.6 9.6 4.8 16-0.8 5.6-3.2 12-8 16-4 3.2-8.8 4.8-15.2 4.8-6.4 0-12.8-2.4-17.6-7.2l-84.8-100-4 2.4c-70.4 43.2-151.2 66.4-233.6 66.4-83.2 0-164-23.2-233.6-66.4l-4-2.4-85.6 100.8c-5.6 2.4-12 5.6-18.4 5.6zM505.6 118.4c-220 0-399.2 179.2-399.2 399.2s179.2 399.2 399.2 399.2 399.2-179.2 399.2-399.2-180-399.2-399.2-399.2z m332.8 0c-28 0-55.2 9.6-76 28.8l-5.6 4.8 5.6 4c59.2 42.4 107.2 99.2 140 164l3.2 6.4 5.6-4.8c26.4-21.6 41.6-54.4 41.6-88 0-64-51.2-115.2-114.4-115.2z m-656.8 0c-63.2 0-114.4 51.2-114.4 114.4 0 32 12.8 60.8 35.2 82.4l5.6 5.6 3.2-6.4c33.6-64 82.4-120.8 142.4-161.6l6.4-4-5.6-4.8c-20.8-16.8-46.4-25.6-72.8-25.6z"
                                fill="" p-id="15072"></path>
                            <path
                                d="M504.8 540c-12.8 0-22.4-9.6-22.4-22.4V259.2c0-12.8 9.6-22.4 22.4-22.4 12.8 0 22.4 9.6 22.4 22.4v236h220c12.8 0 22.4 9.6 22.4 22.4 0 12.8-9.6 22.4-22.4 22.4H504.8z"
                                fill="" p-id="15073"></path>
                        </svg>
                        <span>每天{{ hospitalInfo.bookingRule?.releaseTime }}放号</span> 
                    </div>
                </div>
            </div>
            <div class="card-content-right">
                <img :src="`data:image/jpeg;base64,${hospitalInfo.logoData}`">
            </div>
        </div>
    </el-card>
</template>

<script setup lang="ts">
import { progressProps } from "element-plus";
import { useRouter } from "vue-router";
// 获取路由器对象
let $router = useRouter();
// 点击医院卡片的时候跳转医院详情页面
const goDetail = () =>{
    $router.push({path:'/hospital/register',query:{hoscode:props.hospitalInfo.hoscode}})
}
// 接受父组件传递过来的props->即为已有的医院数据
 let props = defineProps(['hospitalInfo']);


</script>

<style scoped lang="scss">
.card-content {
    display: flex;
    justify-content: space-between;
span{
    margin-left: 10px;
}
    .card-content-right {
        img {
            width: 70px;
            height: 70px;
            border-radius: 50%;
        }
    }

    .card-content-left {
        width: 60%;

        .tip {
            color: #a7abb7;
            margin-top: 30px;
            display: flex;
            justify-content: space-between;
            .level,.time{
                display: flex;
                align-items: center;
            }
        }
    }
}
</style>
